<template>
  <div class="mainor">
    <el-form
      :inline="true"
      :rules="rules"
      :model="monitorForm"
      class="demo-form-inline"
      ref="userListFrom"
      label-width="100px"
    >
      <div
        class="main_spac1 paddingBottom5"
        @click="(mainor_ex = false), (mainor_co = false)"
      >
        <div class="main_white padding10 paddingBottom0">
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>订单列表</span>
            </div>
            <div class="main_crumbs_r boxnr">
              <el-checkbox
                v-model="setWindow"
                class="marginRight20"
                @change="checkWindow()"
                true-label="1"
                false-label="0"
                >窗口化设置</el-checkbox
              >
              <el-button @click.stop="mainor_ex = true">页面设置</el-button>
            </div>
          </div>
          <div class="marginBottom5 marginTop15">
            <el-form-item
              label="用户名称："
              prop="form.name_uid"
              class="marginBottom5"
              :rules="rules.name_uid"
            >
              <el-autocomplete
                v-model.trim="monitorForm.form.name_uid"
                :trigger-on-focus="true"
                ref="company"
                :disabled="true"
                :fetch-suggestions="
                  (queryString, cb) => {
                    basicquerySearchAsync(queryString, cb);
                  }
                "
                placeholder="用户名称"
                clearable
                class="wid240 main_comm"
                :highlight-first-item="true"
                value-key="nickname"
                @select="
                  (item) => {
                    basicChange(item);
                  }
                "
              >
                <template slot-scope="{ item }">
                  <div class="main_name">
                    <span> {{ item.nickname }}</span>
                    <span class="main_addr" v-if="info.show_member_code == 1">{{
                      item.info.code
                    }}</span>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
            <el-form-item
              label="配送日期："
              prop="form.send_time"
              :rules="rules.send_time"
            >
              <el-date-picker
                v-model="monitorForm.form.send_time"
                type="date"
                :editable="false"
                :clearable="false"
                class="time240"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="changeSendTime"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              label="配送时间："
              prop="form.send_time_id"
              :rules="rules.send_time_id"
            >
              <el-select
                v-model.trim="monitorForm.form.send_time_id"
                placeholder="配送时间"
                class="wid240"
              >
                <el-option label="无" :value="0"></el-option>
                <el-option
                  v-for="(send_time, index) in info.send_time"
                  :key="index"
                  :label="send_time"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注：" prop="form.remark">
              <el-input
                v-model.trim="monitorForm.form.remark"
                placeholder="备注"
                clearable
              ></el-input>
            </el-form-item>
            <div class="clearfix"></div>
            <el-form-item label="订单标签：" prop="form.remark" v-if="memberLabelList.length">
              <el-checkbox-group v-model="orderLabelIds" :disabled="memberLabelLoading">
                <el-checkbox v-for="item in memberLabelList" :label="item.id" :key="item.id"> 
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
      </div>
      <!-- 子账户 -->
      <div
        class="main_spac1"
        style="padding-bottom: 5px; padding-top: 5px"
        @click="(mainor_ex = false), (mainor_co = false)"
      >
        <div class="main_white padding10">
          <div class="mainor_zh boxnr" style="text-align: left">
            <el-form-item
              label="子账户："
              prop="form.sub_zid"
              :rules="rules.sub_zid"
              class="marginBottom0"
              v-if="display_sub_account"
            >
              <el-select
                v-model.trim="monitorForm.form.sub_zid"
                placeholder="子账户"
                class="wid240"
                @change="sub_account"
                filterable
              >
                <el-option
                  v-for="(subAccount, index) in address.subAccount"
                  :key="index"
                  :label="subAccount.nickname"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <div style="width: 65%" class="paddingLeft38">
              <span>收货人：<span class="mg-l-14">{{ address.address.name }}</span></span>
              <span>{{ address.address.mobile }}</span>
              <span style="width: 80%">{{
                address.address.address + address.address.detail
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品名称 -->
      <div
        class="main_spac1"
        style="padding-top: 5px"
        @click="(mainor_ex = false), (mainor_co = false)"
      >
        <div class="main_white padding10">
          <div class="mainor_sp boxha mg-b-6 mg-t-6">
            <ul class="box">
              <li class="box">
                <span> <em>*</em><span class="mg-r-6">商品名称：</span></span>
                <el-autocomplete
                  v-if="saleSwitch==='0'"
                  v-model="formsp.value"
                  ref="searchSelect"
                  class="wid240 main_comm mg-l-6"
                  :fetch-suggestions="oldQuerySearchAsync"
                  placeholder="商品/助记码/编码/别名"
                  clearable
                  :highlight-first-item="true"
                  value-key="name"
                  @select="handleSelect"
                  @focus="goodsFocus"
                  @clear="$refs.searchSelect.$children[0].blur()"
                >
                  <template slot-scope="{ item }">
                    <div class="main_name">
                      <span>
                        {{ item.goods.name }}【{{
                          item.spu_name ? item.spu_name.title : ""
                        }}】
                      </span>
                      <span
                        class="main_addr"
                        v-if="info.show_sku_code == 1"
                        >{{ item.goods_spu_code }}</span
                      >
                    </div>
                  </template>
                </el-autocomplete>
                <new-change-goods-input
                  v-else
                  ref="searchSelect"
                  class="wid240 main_comm mg-l-6"
                  v-model="formsp.value"
                  clearable
                  :parentQuerySearchAsync="querySearchAsync"
                  :tableList="goodsSearchList"
                  @clear="goodsClear"
                  @select="handleSelect"
                  @focus="goodsFocus"
                ></new-change-goods-input>
              </li>
              <li class="box mg-l-20 mg-r-4">
                <span><em>*</em><span class="mg-r-10">数量：</span></span>
                <el-input
                  v-model.trim="formsp.num"
                  ref="focusw2"
                  placeholder="数量"
                  clearable
                  class="wid240"
                  @keyup.enter.native="mainor_sp"
                ></el-input>
              </li>
            </ul>
            <div class="mg-l-18">
              <el-button type="primary" class="mg-r-6" @click="mainor_qr"
                >确认(回车)</el-button
              >
              <el-button class="mg-r-6" type="primary" @click="reset"
                >重置</el-button
              >
              <el-button type="primary" @click="openBatchAdd"
                >批量添加</el-button
              >
            </div>
            <div class="svg_box">
              <svg
                aria-hidden="true"
                :class="[
                  sort_order_down ? 'new_navbar_svg' : 'new_navbar_svg2',
                ]"
                width="28"
                height="28"
                @click="handleSort"
              >
                <use xlink:href="#icon-order_sort_btn" />
              </svg>
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                  箭头向上，新增的商品在最下面；
                  <br />
                  箭头向下，新增的商品在最上面
                </div>
                <svg
                  aria-hidden="true"
                  class="navbar_svg"
                  width="16"
                  height="16"
                >
                  <use xlink:href="#icon-summary_question" />
                </svg>
              </el-tooltip>
            </div>
          </div>
          <div
            class="main_table main_taf"
            :class="{ 'set-table-wrap': setWindow == 1, 'paddingBottom10': searchBarFixed}"
            :style="{
              ...fontSizes,
            }"
          >
            <vxe-table
              ref="xTable"
              class="sortable-row-gen"
              size="mini"
              resizable
              row-height="60"
              :data="monitorForm.list"
              :column-config="{ isCurrent: true, isHover: true }"
              :row-config="{ isCurrent: true, isHover: true, useKey: true }"
              :checkbox-config="{ checkStrictly: true }"
              :edit-config="{
                trigger: 'click',
                mode: 'cell',
                icon: 'fa fa-pencil',
              }"
              v-loading="goodsListLoading"
              @resizable-change="resizableChange"
              @scroll="scroll"
            >
              <vxe-table-column
                type="seq"
                title="序号"
                width="60"
              ></vxe-table-column>
              <vxe-table-column :width="showWidth('拖动') || 60" title="拖动">
                <template v-slot="{ rowIndex }">
                  <el-tooltip
                    v-if="rowIndex == 0"
                    class="item"
                    effect="dark"
                    content="按住后可以上下拖动排序"
                    placement="top-start"
                    :value="showTooltip"
                  >
                    <span class="drag-btn">
                      <i class="vxe-icon--menu"></i>
                    </span>
                  </el-tooltip>
                  <span class="drag-btn" v-else>
                    <i class="vxe-icon--menu"></i>
                  </span>
                </template>
                <template v-slot:header>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="按住后可以上下拖动排序"
                    placement="top-start"
                  >
                    <i class="vxe-icon--question"></i>
                  </el-tooltip>
                </template>
              </vxe-table-column>
              <vxe-table-column
                field="url"
                :width="showWidth('商品图片') || 120"
                title="商品图片"
                class-name="main_hei"
                v-if="showFun(2)"
              >
                <template slot-scope="scope">
                  <div class="demo-image__error mainor_im">
                    <el-image
                      fit="fill"
                      :src="scope.row.url"
                      :preview-src-list="[scope.row.url]"
                    >
                      <div slot="error" class="image-slot">
                        <img :src="puzzleImg" />
                      </div>
                    </el-image>
                  </div>
                </template>
              </vxe-table-column>
              <vxe-table-column
                field="name"
                title="商品名称"
                v-if="showFun(3)"
                :width="showWidth('商品名称') || 240"
              >
                <template slot-scope="scope">
                  <div
                    style="
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 3;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: initial;
                    "
                  >
                    {{ scope.row.name }}【{{ scope.row.spu_name }}】
                  </div>
                </template></vxe-table-column
              >
              <vxe-table-column
                field="describe"
                title="描述"
                v-if="showFun(4)"
                :width="showWidth('描述')"
                show-overflow-tooltip
              >
              </vxe-table-column>
              <vxe-table-column
                field="unit"
                title="单位"
                v-if="showFun(5)"
                :width="showWidth('单位') || 60"
              >
              </vxe-table-column>
              <vxe-table-column
                title="现有库存"
                v-if="showFun(6)"
                :width="showWidth('现有库存') || 120"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row.num }}</div>
                </template>
              </vxe-table-column>
              <vxe-table-column
                field="minimum"
                title="起订量"
                v-if="showFun(7)"
                :width="showWidth('起订量') || 90"
              >
              </vxe-table-column>
              <vxe-table-column
                field="designated_inventory"
                title="指定库存"
                v-if="showFun(8)"
                :width="showWidth('指定库存') || 120"
              >
              </vxe-table-column>
              <vxe-table-column
                field="purchase_price"
                title="采购价"
                v-if="showFun(10)"
                :width="showWidth('采购价') || 90"
              >
                <template slot-scope="scope">
                  <div
                    :style="{
                      color: scope.row.red ? 'red' : '',
                      lineHeight: '0',
                    }"
                  >
                    {{ scope.row.purchase_price }}
                  </div>
                </template>
              </vxe-table-column>
              <vxe-table-column
                class-name="main_hei"
                title="数量"
                v-if="showFun(9)"
                :width="showWidth('数量') || 60"
              >
                <template v-slot="{ row, rowIndex }">
                  <el-form-item
                    :prop="'list.' + rowIndex + '.order_num'"
                    :rules="rules.order_num"
                    label-width="10px"
                    label=" "
                  >
                    <el-input
                      v-model.trim="row.order_num"
                      :ref="'order_num' + rowIndex"
                      placeholder="数量"
                      class="wid110"
                      @keydown.native="keyMove('order_num', rowIndex, $event)"
                    ></el-input>
                  </el-form-item>
                </template>
              </vxe-table-column>
              <vxe-table-column
                title="单价"
                :width="showWidth('单价') || 60"
                v-if="showFun(11)"
              >
                <template v-slot="{ row, rowIndex }">
                  <el-form-item
                    :prop="'list[' + rowIndex + '].order_price'"
                    :rules="rules.order_price"
                    label-width="10px"
                    label=" "
                  >
                    <div class="form_flex">
                      <el-input
                        v-model.trim="row.order_price"
                        :ref="'order_price' + rowIndex"
                        placeholder="单价"
                        class="wid110"
                        style="
                          margin-top: 0px !important;
                          margin-bottom: 0px !important;
                        "
                        @keydown.native="
                          keyMove('order_price', rowIndex, $event)
                        "
                      ></el-input>
                      <el-popover
                        placement="bottom"
                        width="180"
                        trigger="hover"
                      >
                        <div class="order_num_tips">
                          <span>上一次单价：{{ row.pre_price }}</span>
                          <span
                            >上一次采购价：{{ row.pre_purchase_price }}</span
                          >
                        </div>
                        <i
                          slot="reference"
                          style="font-size: 16px"
                          class="el-icon-question"
                        ></i>
                      </el-popover>
                    </div>
                  </el-form-item>
                </template>
              </vxe-table-column>
              <vxe-table-column
                class-name="main_hei"
                title="配送单价"
                v-if="showFun(12)"
                :width="showWidth('配送单价')"
              >
                <template v-slot="{ row, rowIndex }">
                  <el-form-item
                    :prop="'list.' + rowIndex + '.sort_price'"
                    :rules="rules.sort_price"
                    label-width="10px"
                    label=" "
                  >
                    <el-input
                      v-model.trim="row.sort_price"
                      :ref="'sort_price' + rowIndex"
                      placeholder="配送单价"
                      class="wid110"
                      @keydown.native="keyMove('sort_price', rowIndex, $event)"
                    ></el-input>
                    <el-popover
                      placement="bottom"
                      width="320"
                      trigger="hover"
                    >
                      <div class="order_num_tips">
                        <template v-if="is_high_precision == 2">
                          <span>默认保留两位小数</span>
                          <span>系统开启保留四位小数功能后即可保留四位小数</span>
                        </template>
                        <template v-else>
                          <span>上一次单价：{{ row.pre_price }}</span>
                          <span>上一次采购价：{{ row.pre_purchase_price }}</span>
                        </template>
                      </div>
                      <i
                        slot="reference"
                        style="font-size: 16px"
                        class="el-icon-question"
                      ></i>
                    </el-popover>
                  </el-form-item>
                </template>
              </vxe-table-column>
              <vxe-table-column
                field="userNickname"
                title="小计"
                v-if="showFun(13)"
                :width="showWidth('小计') || 60"
              >
                <template slot-scope="scope">{{
                  $toFixed(scope.row.order_num * scope.row.order_price)
                }}</template>
              </vxe-table-column>
              <vxe-table-column
                title="备注"
                v-if="showFun(14)"
                :width="showWidth('备注')"
              >
                <template v-slot="{ row, rowIndex }">
                  <el-input
                    v-model.trim="row.remark"
                    placeholder="备注"
                    class="wid240"
                  ></el-input>
                  <el-link type="danger" @click="scdelete(row, rowIndex)"
                    >删除</el-link
                  >
                </template>
              </vxe-table-column>
            </vxe-table>
            <!-- <el-table
              ref="multipleTable"
              :data="monitorForm.list"
              element-loading-text="加载中"
              v-loading="table_loading"
              fit
              border
              highlight-current-row
            >
              <el-table-column label="序号" fixed="left">
                <template slot-scope="scope">{{
                  scope.row.list_index
                }}</template>
              </el-table-column>

              <div v-for="(field, index) in info.field_x" :key="index">
                <el-table-column
                  label="商品图片"
                  prop="url"
                  min-width="100"
                  class-name="main_hei"
                  v-if="field == 2"
                >
                  <template slot-scope="scope">
                    <div class="demo-image__error mainor_im">
                      <el-image fit="fill" :src="scope.row.url">
                        <div slot="error" class="image-slot">
                          <img :src="puzzleImg" />
                        </div>
                      </el-image>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="商品名称"
                  prop="name"
                  :show-overflow-tooltip="true"
                  min-width="150"
                  align="center"
                  v-if="field == 3"
                >
                  <template slot-scope="scope">
                    <div
                      style="
                        display: flex;
                        align-items: start;
                        justify-content: center;
                      "
                    >
                      <span
                        v-if="scope.row.activity_type != 0"
                        :class="'active' + scope.row.activity_type"
                        >[{{
                          activity_type_list[scope.row.activity_type]
                        }}]</span
                      >
                      {{ scope.row.name }}【{{ scope.row.spu_name }}】
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="描述"
                  prop="describe"
                  v-if="field == 4"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="单位"
                  prop="unit"
                  v-if="field == 5"
                  :show-overflow-tooltip="true"
                />
                <el-table-column label="现有库存" prop="num" v-if="field == 6">
                </el-table-column>
                <el-table-column
                  label="起订量"
                  prop="minimum"
                  v-if="field == 7"
                />
                <el-table-column
                  label="指定库存"
                  prop="designated_inventory"
                  v-if="field == 8"
                />

                <el-table-column
                  label="数量"
                  min-width="160"
                  class-name="main_hei"
                  v-if="field == 9"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.order_num'"
                      :rules="rules.order_num"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.order_num"
                        :ref="'order_num' + scope.row.goods_spu_id"
                        placeholder="数量"
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column
                  label="采购价"
                  prop="purchase_price"
                  v-if="field == 10"
                >
                  <template slot-scope="scope">
                    <span :style="{ color: scope.row.red ? 'red' : '' }">
                      {{ scope.row.purchase_price }}
                    </span>
                  </template>
                </el-table-column>

                <el-table-column
                  label="单价"
                  prop="order_price"
                  min-width="180"
                  class-name="main_hei"
                  v-if="field == 11"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.order_price'"
                      :rules="rules.order_price"
                      label-width="10px"
                      label=" "
                    >
                      <el-input
                        v-model.trim="scope.row.order_price"
                        :ref="'order_price' + scope.row.goods_spu_id"
                        placeholder="单价"
                        class="wid110"
                      ></el-input>
                      <el-popover
                        placement="bottom"
                        width="180"
                        trigger="hover"
                      >
                        <div class="order_num_tips">
                          <span>上一次单价：{{ scope.row.pre_price }}</span>
                          <span
                            >上一次采购价：{{
                              scope.row.pre_purchase_price
                            }}</span
                          >
                        </div>
                        <i
                          slot="reference"
                          style="font-size: 16px"
                          class="el-icon-question"
                        ></i>
                      </el-popover>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column
                  label="小计"
                  prop="userNickname"
                  v-if="field == 12"
                >
                  <template slot-scope="scope">{{
                    (scope.row.order_num * scope.row.order_price) | twoPlace
                  }}</template>
                </el-table-column>

                <el-table-column
                  label="配送单价"
                  v-if="field == 13"
                  width="140"
                >
                  <template slot-scope="scope">
                    <el-form-item
                      :prop="'list.' + scope.$index + '.sort_price'"
                      :rules="rules.sort_price"
                    >
                      <el-input
                        v-model.trim="scope.row.sort_price"
                        :ref="'sort_price' + scope.row.goods_spu_id"
                        placeholder="配送单价"
                        class="wid110"
                      ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>

                <el-table-column
                  v-if="field == 14"
                  label="备注"
                  prop="remark"
                  width="350"
                  class-name="main_hei"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model.trim="scope.row.remark"
                      placeholder="备注"
                      class="wid240"
                    ></el-input>
                    <el-link
                      type="danger"
                      @click="
                        scope.row.show
                          ? monitorForm.list.length <= 1
                            ? endDelete()
                            : scdelete(scope, true)
                          : scdelete(scope)
                      "
                      >删除</el-link
                    >
                  </template>
                </el-table-column>
              </div>
            </el-table> -->
          </div>

          <div class="newConBox_p10 paddingBottom10" id="newConBox">
            <div
              :class="['mainor_pr boxdq newConBox ', { on: searchBarFixed }]"
            >
              <div class="mainor_prl">
                <!-- <el-button
                    type="primary"
                    @click="preservation(1)"
                    v-repeatClick
                    >保存并继续修改</el-button
                  > -->
                <el-button type="primary" @click="preservation(2)" v-repeatClick
                  >保存并返回列表</el-button
                >
                <el-button @click="preservation(3)" v-if="order_status == 0"
                  >保存并通过审核</el-button
                >
                <el-button @click="$router.back(-1)">取消</el-button>
              </div>
              <div class="mainor_prr">
                合计品种：{{ monitorForm.list.length }}件
                <span>合计金额：¥{{ total }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>

    <!-- 页面设置 -->
    <div :class="[{ on: mainor_ex }, ' mainor_ex']">
      <div class="mainor_exb">
        <h3>子账号</h3>
        <div class="mainor_exb_an">
          <el-checkbox v-model="display_sub_account" @change="setting_company"
            >显示</el-checkbox
          >
        </div>
        <h3>表头设置</h3>
        <div class="mainor_exb_an">
          <el-checkbox-group v-model="type">
            <el-checkbox
              v-for="(Header, index) in Header"
              :key="index"
              :label="Header.id"
              :disabled="Header.disabled"
              >{{ Header.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <h3>表头字体大小设置</h3>
        <el-select
          style="margin-left: 20px"
          v-model="fontSize"
          @change="changeFontSize"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="mainor_exb_an flex-middle">
          <span>销售指数</span>
          <el-switch
            v-model="saleSwitch"
            @change="changeSaleSwitch"
            active-value="1"
            inactive-value="0"
            active-color="#03A98E"
            active-text="开"
            inactive-text="关"
            class="mainor_switch mg-l-10"
          ></el-switch>
        </div>
      </div>
      <div class="mainor_exb_b">
        <el-button type="primary" @click="determine" v-repeatClick
          >确定</el-button
        >
        <el-button @click="recovery" v-repeatClick>恢复</el-button>
        <el-button @click="mainor_ex = false">取消</el-button>
      </div>
    </div>

    <!-- 批量添加 -->
    <BatchAddDialog 
      :batchVisible.sync="batchVisible" 
      :options="shopOptions" 
      :selectList="monitorForm.list"
      :uid="monitorForm.form.uid"
      :group_id="address.info.id"
      :send_time="monitorForm.form.send_time"
      @addShopData="addShopData"
    ></BatchAddDialog>
  </div>
</template>

<script>
const shuju = {
  list: {
    pre_price: "",
    pre_purchase_price: "",
    activity_type: "",
    list_index: "",
    pid: "",
    category_id: "",
    pic: "",
    url: "",
    name: "",
    describe: "",
    goods_id: "",
    standard_goods_id: "",
    goods_spu_id: "",
    standard_spu_id: "",
    standard_spu_code: "",
    byname: "",
    spu_name: "",
    unit: "",
    order_num: "",
    old_num: "",
    new_num: "",
    order_price: "",
    old_price: "",
    new_price: "",
    purchase_price: "",
    remark: "",
    new_remark: "",
    goods_cycle_id: "",
    show: false,
    discount: "",
    sort_price: "",
    old_sortprice: "",
    new_sortprice: "",
    is_show: "",
  },
  form: {
    name_uid: "",
    uid: "",
    nickname: "",
    line_id: "",
    salesman_id: "",
    contact: "",
    mobile: "",
    address: "",
    send_time: "",
    send_time_id: 0,
    order_status: 1,
    remark: "",
    zid: null,
    sub_zid: null,
  },
  formsp: {
    name: {},
    girard: null,
    num: "",
    value: "",
  },
  address: {
    address: {
      name: "",
      mobile: "",
      address: "",
      detail: "",
    },
    info: {},
    subAccount: [],
  },
};
import Sortable from "sortablejs";
import { mapGetters, mapState } from "vuex";
import {
  order_base,
  order_getMemberInfo,
  order_copyList,
  order_edit,
  goods_getOfferPrice,
  order_info,
  member_getMembers,
  orderList_delete,
  getGoodsLatestPrice,
  getMemberLabel,
  getGoodsBuyPrice,
} from "@/api/order/orderList";
import { apiUrl, objKeySort, Md5, packApi } from "@/utils/public";
import rules from "@/rules/order/orderList_add";
import {
  puzzleImg,
  field_save,
  setting_company,
  goodsSupList,
  goods_getGoodsSpu,
} from "@/api/currency";
import { parseTime } from "@/utils/index";
// 引入模态框组件
import BatchAddDialog from "./components/batchAddDialog";
import { mixins } from "@/mixins/index.js";
import { category_index } from "@/api/commodity/commodityClassification";
export default {
  mixins: [mixins],
  components: {
    BatchAddDialog,
  },
  computed: {
    ...mapState("order", ["shopTableWidthList"]),
    ...mapGetters(["avatar"]),
    total() {
      let sz = 0;
      this.monitorForm.list.forEach((e) => {
        sz += parseFloat(
          this.$toFixed(parseFloat(e.order_num * e.order_price))
        );
      });
      return this.$toFixed(sz);
    },
    fontSizes() {
      return {
        "--FontSize": this.fontSize + "px",
      };
    },
  },
  data() {
    return {
      fontSize: localStorage.getItem("changeFontSize") || "14",
      // 时间
      parseTime,
      // 验证
      rules,
      // 列表数据
      monitorForm: {
        form: {
          name_uid: "",
          uid: "",
          nickname: "",
          line_id: "",
          salesman_id: "",
          contact: "",
          mobile: "",
          address: "",
          send_time: "",
          send_time_id: 0,
          order_status: 1,
          remark: "",
          zid: null,
          sub_zid: null,
        },
        list: [],
      },
      // 删除商品id
      deleteIds: [],
      activity_type_list: [],
      order_price: "",
      goods_cycle_id: "",
      goods_pre_purchase_price: "",
      goods_pre_price: "",
      address: {
        address: {
          name: "",
          mobile: "",
          address: "",
          detail: "",
        },
        info: {},
        subAccount: [],
        group_id: "",
      },
      order_status: 1,
      puzzleImg,
      info: [],
      // 商品搜索
      formsp: {
        name: {},
        girard: null,
        num: "",
        value: "",
      },
      show: true,
      // 页面设置
      mainor_ex: false,
      display_sub_account: false,
      type: [],
      Header: [
        {
          id: 1,
          name: "序号",
          disabled: true,
        },
        {
          id: 2,
          name: "商品图片",
          disabled: false,
        },
        {
          id: 3,
          name: "商品名称",
          disabled: true,
        },
        {
          id: 4,
          name: "描述",
          disabled: false,
        },
        {
          id: 5,
          name: "单位",
          disabled: true,
        },
        {
          id: 6,
          name: "现有库存",
          disabled: false,
        },
        {
          id: 7,
          name: "起订量",
          disabled: false,
        },
        {
          id: 8,
          name: "指定库存",
          disabled: false,
        },
        {
          id: 9,
          name: "数量",
          disabled: false,
        },
        {
          id: 10,
          name: "采购价",
          disabled: false,
        },
        {
          id: 11,
          name: "单价",
          disabled: false,
        },
        {
          id: 12,
          name: "配送单价",
          disabled: false,
        },
        {
          id: 13,
          name: "小计",
          disabled: false,
        },
        {
          id: 14,
          name: "备注",
          disabled: false,
        },
      ],
      // id
      id: this.$route.query.id,
      // 监听滚动
      searchBarFixed: false,
      table_loading: false,
      sort_order_down: true, //true 向下  false  向上
      new_list: [],
      new_data: [],

      // 批量添加模态框
      batchVisible: false,
      // 模态框的搜索条件-全部分类的数据
      options: [],

      // 商品分类树
      shopOptions: [],

      shopTableWidthLists: [],
      showTooltip: false,

      // 模态框的搜索条件-全部分类的数据
      options: [
        {
          value: "14",
          label: "14",
        },
        {
          value: "16",
          label: "16",
        },
        {
          value: "18",
          label: "18",
        },
      ],
      // 设置窗口化
      setWindow: localStorage.getItem("setWindow") || "0",
      // 销售指数开关
      saleSwitch: localStorage.getItem("saleSwitch") || "0",
      goodsSearchList: [],
      is_high_precision: 1, // 配送单价4位小数状态
      goodsListLoading: false, // 商品列表loading
      memberLabelList: [], // 订单标签
      memberLabelLoading: false, // 订单标签loading
      orderLabelIds: [], // 选中的订单标签
    };
  },

  mounted() {
    let yindaoList = [
      // 定位到相应的元素位置，如果不设置element，则默认展示在屏幕中央
      {
        element: document.querySelector("#attachments"),
        title: "新增订单界面优化", // 标题
        intro: `<img src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2404/16/z1HHY5oq9bVwU4mxnRUunPVQp1tIBy5LA5mz9MPm.png"/>`, // 内容
      },
      {
        element: document.querySelector("#attachments"),
        title: "优化商品表格展示", // 标题
        intro: `<img src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2404/16/ivrHUGktWlaSDqfvUGoGomEvqRdX84rqSAGz2e8M.png"/>`, // 内容
      },
    ];
    // 获取缓存中是否存在引导列表状态
    let state = localStorage.getItem("orderYinDaoList");
    if (!state) {
      this.$intro()
        .setOptions({
          steps: yindaoList, //上面声明的数组
          nextLabel: "下一步", // 下一个的按钮文字
          prevLabel: "上一步", // 上一个按钮文字
          skipLabel: "跳过", // 跳过指引的按钮文字
          doneLabel: "完成", // 完成按钮的文字
          hidePrev: false, // 是否在第一步中隐藏“上一步”按钮;不隐藏，将呈现为一个禁用的按钮
          hideNext: false, // 是否在最后一步中隐藏“下一步”按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
          exitOnEsc: false, // 点击键盘的ESC按钮是否退出指引
          exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
          showStepNumbers: true, // 是否显示步骤编号
          disableInteraction: true, // 是否禁用高亮显示框内元素的交互
          showBullets: true, // 是否显示面板的指示点
          overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
          helperElementPadding: 10, // 选中的指引元素周围的填充距离
          showProgress: false, //进度条
        })
        // 点击跳过按钮后执行的事件
        .onexit(() => {
          localStorage.setItem("orderYinDaoList", "true");
        })
        // 确认完毕之后执行的事件
        .onbeforeexit(() => {
          localStorage.setItem("orderYinDaoList", "true");
        })
        .start();
    }
    this.checkWindow();
    window.addEventListener("scroll", this.handleScroll);
    this.$nextTick(() => {
      this.rowDrop();
    });
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  beforeCreate() {},
  created() {
    // 信息
    this.order_base();
    this.order_info(this.id);
    // 获取模态框分类数据
    this.getCategory();
  },

  methods: {
    checkWindow() {
      if (this.setWindow == "0") {
        this.borderHeight = null;
      } else {
        this.getNumerical(360);
      }
      localStorage.setItem("setWindow", this.setWindow);
    },
    scroll() {
      this.showTooltip = false;
    },
    // 获取商品表格宽度的缓存数据并渲染至页面中
    getShopTableWidth() {
      // 将缓存中的数据进行深克隆，省的后续操作修改原数组
      let shopTableWidthList = this._.cloneDeep(this.shopTableWidthList);
      let oldList = JSON.parse(shopTableWidthList);
      let arr = [];
      oldList.forEach((item) => {
        if (item.id == 100 || item.id == 12) {
          arr.push(item);
        } else {
          this.type.forEach((item1) => {
            if (item.id == item1) {
              arr.push(item);
            }
          });
        }
      });
      this.shopTableWidthLists = arr;
    },
    showWidth(key) {
      if (!key) return "auto";
      let index = this.shopTableWidthLists.findIndex(
        (item) => item.title == key
      );
      if (index == -1) return "auto";
      let width = this.shopTableWidthLists[index].width;
      if (width == 0 || width == "0") width = "auto";
      return width;
    },
    resizableChange({ $table }) {
      let tableWidthList = [];
      $table.collectColumn.forEach((item, index) => {
        for (let i = 0; i < this.Header.length; i++) {
          if (item.title == this.Header[i].name) {
            let data = {
              id: this.Header[i].id,
              title: item.title,
              width: String(item.renderWidth),
            };
            tableWidthList.push(data);
            return;
          } else if (item.title == "拖动") {
            let data = {
              id: 100,
              title: item.title,
              width: String(item.renderWidth),
            };
            tableWidthList.push(data);
            return;
          }
        }
      });
      this.$store.commit("order/CHANGETABLEWIDTH", tableWidthList);
    },
    getCategory() {
      let query = packApi({ filter: true });
      category_index(query).then((res) => {
        if (res.errcode == 0) {
          this.shopOptions = res.data.category;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 拖拽表格
    rowDrop() {
      this.$nextTick(function () {
        const xTable = this.$refs.xTable;
        const that = this;
        Sortable.create(
          xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
          {
            handle: ".drag-btn",
            onEnd({ newIndex, oldIndex }) {
              const currRow = that.monitorForm.list.splice(oldIndex, 1)[0];
              that.monitorForm.list.splice(newIndex, 0, currRow);
              const newArray = that.monitorForm.list.slice(0);
              that.monitorForm.list = []; // 必须有此步骤，不然拖拽后回弹
              that.monitorForm.list = newArray; // 重新赋值，用新数据来刷新视图
              that.updateIndex(that.monitorForm.list); //更改列表中的序号，使序号1.2.3.4.....显示，不然就是行拖拽后乱序显示如:3.2.4.1...
            },
          }
        );
      });
    },
    updateIndex(tableData) {
      tableData.forEach((item, index) => {
        item.orderNum = index + 1;
      });
    },
    // 排序操作
    handleSort() {
      this.sort_order_down = !this.sort_order_down;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        {
          order_add_goods_sort: this.sort_order_down ? 0 : 1,
        }
      );
      setting_company(data).then((res) => {
        if (res.errcode == 0) {
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    pre_price_fliter: function (val) {
      if (val === undefined || val === null || val === "") {
        return false;
      } else {
        return true;
      }
    },
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 300
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 用户搜索
    basicquerySearchAsync(queryString, cb) {
      let data = packApi({ name: queryString });
      if (queryString) {
        member_getMembers(data).then((res) => {
          if (res.errcode == 0) {
            var results = res.data.list;
            this.$refs.searchSelect.activated = true;
            cb(results);
          } else {
            this.$message.error(res.errmsg);
            cb([]);
          }
        });
      }
    },
    basicChange(val) {
      this.monitorForm.form.uid = val.id;
      let data = packApi({ id: val.id });
      order_getMemberInfo(data).then((res) => {
        if (res.errcode == 0) {
          this.monitorForm.list = [];
          this.monitorForm.form.send_time_id = parseInt(
            res.data.info.send_time_id
          );
          this.monitorForm.form.nickname = res.data.subAccount[0].nickname;
          this.monitorForm.form.line_id = res.data.info.line_id;
          this.monitorForm.form.salesman_id = res.data.info.salesman_id;
          this.monitorForm.form.contact = res.data.address.name;
          this.monitorForm.form.mobile = res.data.address.mobile;
          this.monitorForm.form.address =
            res.data.address.address + res.data.address.detail;
          this.monitorForm.form.zid = null;
          this.monitorForm.form.sub_zid = null;
          res.data.subAccount.map((e, ind) => {
            if (ind == 0) {
              e.id = 0;
              e.nickname = "主账号";
            }
          });
          this.address = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 切换配送日期
    changeSendTime() {
      if(!this.monitorForm.list.length) return;
      this.goodsListLoading = true;
      let goods_ids = this.monitorForm.list.map(el => `${el.goods_spu_id}_${el.goods_id}`);
      let data = packApi({
        uid: this.monitorForm.form.uid,
        send_time: this.monitorForm.form.send_time,
        goods_ids: goods_ids.join(','),
      });
      getGoodsBuyPrice(data).then(res=> {
        this.goodsListLoading = false;
        if (res.errcode == 0) {
          // 检查价格是否有变动
          let isChange = this.monitorForm.list.some(el => {
            const item = res.data[el.goods_spu_id];
            return el.order_price != item.price;
          });
          if(isChange) {
            this.$confirm("更换配送日期后，商品价格有变动，是否修改？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(()=> {
              this.monitorForm.list.forEach(el => {
                const item = res.data[el.goods_spu_id];
                if(item) {
                  el.order_price = item.price;
                }
              });
            });
          }
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 获取商品最近价格 
    getGoodsLatestPrice() {
      if(!this.monitorForm.list.length) return;
      this.goodsListLoading = true;
      let goodsSpuIds = this.monitorForm.list.map(el => el.goods_spu_id).join(",");
      let data = packApi({
        uid: this.monitorForm.form.uid,
        zid: this.monitorForm.form.zid || 0,
        goods_spu_ids: goodsSpuIds
      });
      getGoodsLatestPrice(data).then(res=> {
        this.goodsListLoading = false;
        if(res.errcode == 0) {
          this.monitorForm.list.forEach(el => {
            const item = res.data[el.goods_spu_id];
            if(item) {
              el.pre_price = item.pre_price;
              el.pre_purchase_price = item.pre_purchase_price;
            }
          })
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 获取用户订单标签
    getMemberLabel() {
      this.memberLabelLoading = true;
      let data = packApi({
        user_id: this.monitorForm.form.zid || this.monitorForm.form.uid,
        order_id: this.id,
      });
      getMemberLabel(data).then(res=> {
        if(res.errcode == 0) {
          this.memberLabelLoading = false;
          this.memberLabelList = res.data;
          // 更新订单标签选中状态
          this.orderLabelIds = res.data.filter(item=> item.is_selected).map(e=> e.id);
        }else {
          this.$message.error(res.errmsg);
        }
      })
    },
    // 子账号显示
    setting_company() {
      if (!this.display_sub_account) {
        this.order_info(this.id);
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                display_sub_account: this.display_sub_account ? 1 : 0,
              })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { display_sub_account: this.display_sub_account ? 1 : 0 }
      );
      setting_company(data).then((res) => {
        if (res.errcode == 0) {
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    sub_account(val) {
      this.monitorForm.form.zid = this.address.subAccount[val].id;
      this.address.address = this.address.subAccount[val].address;
      this.monitorForm.form.contact = this.address.subAccount[val].address.name;
      this.monitorForm.form.mobile =
        this.address.subAccount[val].address.mobile;
      this.monitorForm.form.address =
        this.address.subAccount[val].address.address +
        this.address.subAccount[val].address.detail;
      // 获取商品最近价格
      this.getGoodsLatestPrice();
      // 获取用户订单标签
      this.getMemberLabel();
    },
     // 商品名称获取焦点
    goodsFocus() {
      if (this.monitorForm.form.name_uid == "") {
        this.$message.error("用户名称不能为空");
        setTimeout(()=> {
          this.$refs.company.focus();
        },100);
        return;
      }
    },
    // 商品名称清空
    goodsClear() {
      this.$refs.searchSelect.blur();
      this.formsp = {
        name: {},
        girard: null,
        value: "",
        num: this.formsp.num,
      };
    },
    // 商品搜索
    querySearchAsync(queryString, cb) {
      if (queryString.trim() == "") {
        cb([]);
        return;
      }
      let data = packApi({
        name: queryString.trim(),
        uid: this.monitorForm.form.uid,
      });
      goodsSupList(data).then((res) => {
        if (res.errcode == 0) {
          cb([res.data.goods]);
          if(!res.data.goods.length) return;
          this.goodsSearchList = res.data.goods;
          this.$nextTick(()=> {
            this.$refs.searchSelect.setCurrent(res.data.goods[0]);
          });
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
    oldQuerySearchAsync(queryString, cb) {
      if (queryString.trim() == "") {
        cb([]);
        return;
      }
      let data = packApi({ name: queryString.trim() });
      console.log(data);
      goods_getGoodsSpu(data).then(res=> {
        if(res.errcode == 0) {
          let result = res.data.goods.map(e=> {
            let spuName = e.spu_name ? e.spu_name.title : "";
            e.name = `${e.goods.name}【${spuName}】` 
            return e;
          })
          if (this.$refs.searchSelect) this.$refs.searchSelect.activated = true;
          cb(result);
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      })
    },
    changeSaleSwitch(e) {
      localStorage.setItem("saleSwitch", e);
    },
    // 商品选择
    handleSelect(item) {
      this.formsp.name = item;
      this.formsp.girard = item.id;
      if(item.goods_each) this.formsp.value = `${item.goods_each.name}【${item.goods_each.spu_name}】`;
      this.goods_getOfferPrice();
      setTimeout(() => {
        this.$refs.focusw2.focus();
      }, 100);
    },
    goods_getOfferPrice() {
      let formsp = JSON.parse(JSON.stringify(this.formsp));
      let data = packApi({
        uid: this.monitorForm.form.uid,
        group_id: this.address.group_id,
        goods_id: formsp.name.goods_id,
        goods_spu_id: formsp.girard,
        zid: this.monitorForm.form.zid || 0,
        send_time: this.monitorForm.form.send_time,
      });
      goods_getOfferPrice(data).then((res) => {
        if (res.errcode == 0) {
          this.order_price = res.data.price;
          this.goods_cycle_id = res.data.cycle_id;
          this.goods_pre_purchase_price = res.data.pre_purchase_price;
          this.goods_pre_price = res.data.pre_price;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 商品选择确认(回车)
    mainor_sp(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.mainor_qr();
      }
    },
    // 点击添加
    mainor_qr() {
      let formsp = JSON.parse(JSON.stringify(this.formsp));

      if (!formsp.name.goods_id) {
        this.$message.error("请填写商品名称");
        this.$refs.searchSelect.focus();
        return;
      } else if (formsp.num == "") {
        this.$message.error("请填写数量");
        this.$refs.focusw2.focus();
        return;
      } else if(!/^(\d+\.?)?\d{0,2}$/.test(formsp.num)){
        this.$message.error("请输入整数和两位小数");
        return
      } else {
        let monitorForm_list = JSON.parse(
          JSON.stringify(this.monitorForm.list)
        );
        let ind = 0;
        if (monitorForm_list.length != 0) {
          if (!this.sort_order_down) {
            this.$nextTick(() => {
              let table = document.getElementsByClassName(
                "vxe-table--body-wrapper"
              );
              setTimeout(() => {
                this.$set(table[0], "scrollTop", 20000);
              }, 500);
            });
          }
          monitorForm_list.map((e, index) => {
            if (e.goods_spu_id == formsp.girard) {
              ind = e.goods_spu_id;
              return;
            }
          });
          if (ind == 0) {
            this.handle(formsp);
          } else {
            setTimeout(() => {
              // 商品已添加添加确认提示
              this.$confirm("商品已添加是否继续添加", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  const index = monitorForm_list.findIndex(
                    (item) => item.goods_spu_id == formsp.girard
                  );
                  let order_num = this.monitorForm.list[index].order_num;

                  this.monitorForm.list[index].order_num =
                    parseFloat(order_num) + parseFloat(formsp.num);

                  this.reset();
                  ind = 0;
                })
                .catch(() => {
                  this.reset();
                  ind = 0;
                  this.$message({
                    type: "info",
                    message: "已取消添加",
                  });
                });
            }, 100);
          }
        } else {
          this.handle(formsp);
        }
      }
    },
    handle(formsp) {
      let list = JSON.parse(JSON.stringify(shuju.list));
      list.list_index = this.monitorForm.list.length + 1;
      let main = {};
      let haveBind = "";
      formsp.name.goods.images.map((e, index) => {
        if (e.main == 1) {
          main.url = this.avatar.domain + e.path;
          main.pic = e.path;
        }
        if (e.goods_spu_id == formsp.name.id) {
          haveBind = 1;
          list.url = this.avatar.domain + e.path;
          list.pic = e.path || "";
        }
        if (haveBind != 1 && index == formsp.name.goods.images.length - 1) {
          list.url = main.url;
          list.pic = main.pic || "";
        }
      });
      list.pid = formsp.name.goods.pid;
      list.category_id = formsp.name.goods.category_id;
      list.name = formsp.name.goods.name;
      list.goods_id = formsp.name.goods_id;
      list.standard_goods_id = formsp.name.goods.standard_goods_id;
      list.byname =
        formsp.name.goods.use_byname == 1 ? formsp.name.goods.byname : "";
      list.order_price = this.order_price;
      list.old_price = this.order_price;
      list.new_price = "";
      list.cycle_id = String(this.goods_cycle_id);
      list.pre_purchase_price = this.goods_pre_purchase_price;
      list.pre_price = this.goods_pre_price;
      list.goods_spu_id = formsp.name.id;
      list.standard_spu_id = formsp.name.standard_spu_id;
      list.standard_spu_code = formsp.name.standard_spu_code;
      list.spu_name = formsp.name.spu_name.title;
      list.unit = formsp.name.spu_unit.title;
      list.purchase_price = formsp.name.purchase_price;
      list.order_num = formsp.num;
      list.old_num = formsp.num;
      list.new_num = "";
      list.designated_inventory = formsp.name.designated_inventory;
      list.minimum = formsp.name.minimum;
      list.discount = formsp.name.discount;
      list.sort_price = this.order_price;
      list.new_sortprice = "";
      list.old_sortprice = this.order_price;
      list.remark = "";
      list.new_remark = "";
      list.old_remark = "";
      list.is_show = 0;
      if (formsp.name.inventory) {
        list.num = formsp.name.inventory.num;
      } else {
        list.num = 0;
      }
      list.red = false;
      if (parseFloat(list.purchase_price) > parseFloat(list.order_price)) {
        list.red = true;
      }
      if (this.sort_order_down) {
        this.monitorForm.list.unshift(list);
      } else {
        this.monitorForm.list.push(list);
      }
      this.reset();
      setTimeout(() => {
        this.$refs.searchSelect.focus();
      }, 100);
    },
    reset() {
      this.formsp = JSON.parse(JSON.stringify(shuju.formsp));
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },
    // 删除
    scdelete(scope, index, type) {
      let id = this.monitorForm.list[index].id;
      if (type) {
        let activity_type = scope.row.activity_type;
        let activity_type_info = this.activity_type_list[activity_type];
        if (activity_type) {
          let message = `该参加了活动【${activity_type_info}】,确定删除？`;
          this.$confirm(message, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              // this.orderList_delete(id, index);
              this.deleteIds.push(id);
              this.monitorForm.list.splice(index, 1);
            })
            .catch(() => {});
        } else {
          // this.orderList_delete(id, index);
          this.deleteIds.push(id);
          this.monitorForm.list.splice(index, 1);
        }
      } else {
        this.deleteIds.push(id);
        this.monitorForm.list.splice(index, 1);
      }
    },
    endDelete() {
      this.$message.error("订单最后一个商品无法删除");
    },
    // 删除商品
    orderList_delete(id, index) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                id: id,
              })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id }
      );
      orderList_delete(data).then((res) => {
        if (res.errcode == 0) {
          this.monitorForm.list.splice(index, 1);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 页面设置
    determine() {
      let arry = [];
      this.Header.map((e) => {
        this.type.map((p) => {
          if (e.id == p) {
            arry.push(e.id);
            return;
          }
        });
      });
      this.field_save(arry);
    },
    recovery() {
      // this.field_save([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]);
      this.field_save([1, 3, 5, 9, 11, 12, 13, 14]);
    },
    field_save(arry) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { type: 6 })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 6, fields: JSON.stringify(arry) }
      );
      field_save(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          // this.order_base();
          this.$router.go(0);
          this.mainor_ex = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    // 保存
    preservation(type) {
      this.$refs["userListFrom"].validate((valid) => {
        if (valid) {
          let toast = 0;
          let all = 0;
          let arrlist = [];
          let key = 0;
          if (this.monitorForm.list.length == 0) {
            this.$message.error("请至少添加一个商品");
            return;
          }
          this.monitorForm.list.map((c) => {
            key++;
            let title = c.name + "【" + c.unit + "】";
            if (
              parseFloat(c.order_num) != parseFloat(c.old_num) ||
              parseFloat(c.order_price) != parseFloat(c.old_price) ||
              parseFloat(c.sort_price) != parseFloat(c.old_sortprice) ||
              c.remark != c.old_remark
            ) {
              this.new_list[key] = [];
              this.new_list[key]["name"] = title;
            }
            if (c.is_purchase) {
              if (c.is_purchase == 1) {
                if (parseFloat(c.order_num) != parseFloat(c.old_num)) {
                  c.new_remark = c.remark;
                  toast += 1;
                  all += 1;
                  arrlist.push(title);
                }
              }
            }
            if (c.is_show == 0) {
              this.new_list[key] = [];
              this.new_list[key]["name"] = title;
              this.new_list[key]["old_num"] = "";
              this.new_list[key]["new_num"] = c.order_num;
              this.new_list[key]["old_price"] = "";
              this.new_list[key]["new_price"] = c.order_price;
              this.new_list[key]["old_sortprice"] = "";
              this.new_list[key]["new_sortprice"] = c.sort_price;
              this.new_list[key]["old_remark"] = "";
              this.new_list[key]["new_remark"] = c.remark;
            } else {
              if (parseFloat(c.order_num) != parseFloat(c.old_num)) {
                this.new_list[key]["old_num"] = c.old_num;
                this.new_list[key]["new_num"] = c.order_num;
              }
              if (parseFloat(c.order_price) != parseFloat(c.old_price)) {
                this.new_list[key]["old_price"] = c.old_price;
                this.new_list[key]["new_price"] = c.order_price;
              }
              if (parseFloat(c.sort_price) != parseFloat(c.old_sortprice)) {
                this.new_list[key]["old_sortprice"] = c.old_sortprice;
                this.new_list[key]["new_sortprice"] = c.sort_price;
              }
              if (c.remark != c.old_remark) {
                this.new_list[key]["old_remark"] = c.old_remark;
                this.new_list[key]["new_remark"] = c.remark;
              }
            }
          });

          if (toast > 0) {
            if (arrlist.length <= 3) {
              const h = this.$createElement;
              const newData = [];
              for (const i in arrlist) {
                newData.push(h("div", null, arrlist[i]));
              }
              this.$confirm("提示", {
                title: "提示",
                message: h("div", [
                  h(
                    "div",
                    {
                      style:
                        "display: flex;margin-bottom: 10px;    flex-wrap: wrap;",
                    },
                    newData
                  ),
                  h(
                    "div",
                    { style: "color: #606266" },
                    "商品已生成计划采购单，确认继续保存吗？"
                  ),
                ]),
                type: "warning",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
              })
                .then(() => {
                  this.saveData(type);
                })
                .catch(() => {});
            } else if (arrlist.length > 3) {
              this.$confirm(`${all}个商品已生成计划采购单，确认继续保存吗？`, {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                title: "提示",
              })
                .then(() => {
                  this.saveData(type);
                })
                .catch(() => {});
            }
          } else {
            this.saveData(type);
          }
        }
      });
    },
    //保存接口
    saveData(type) {
      let sz = JSON.parse(JSON.stringify(this.monitorForm.list));
      let list = sz.map((e) => {
        let {
          url,
          describe,
          show,
          goods_cycle_id,
          red,
          order_price_copy,
          minimum,
          designated_inventory,
          num,
          list_index,
          pre_price,
          pre_purchase_price,
          activity_type,
          is_purchase,
          new_num,
          old_num,
          new_price,
          old_price,
          new_sortprice,
          old_sortprice,
          new_remark,
          old_remark,
          is_show,
          ...sz
        } = e;
        return { ...sz };
      });
      let newList = list.map((item) => {
        item.sort_price = item.sort_price || item.price;
        delete item._X_ROW_KEY;
        delete item.spu_id;
        delete item.inventory_num;
        delete item.cycle_id;
        delete item.orderNum;
        return item;
      });
      if (type == 3) {
        var { sub_zid, name_uid, ...form } = JSON.parse(
          JSON.stringify(this.monitorForm.form)
        );
        form.zid = form.zid ? form.zid : 0;
      } else {
        var { sub_zid, name_uid, order_status, ...form } = JSON.parse(
          JSON.stringify(this.monitorForm.form)
        );
        form.zid = form.zid ? form.zid : 0;
      }

      for (let i in this.new_list) {
        this.new_data.push({ ...this.new_list[i] });
      }
      let order_list_by_value = newList
        .map((item) => item.goods_spu_id)
        .join(",");
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form,
        { delete_ids: this.deleteIds.join(",") },
        {
          list: JSON.stringify(newList),
          id: this.id,
          order_list_by_value: order_list_by_value,
          contents: JSON.stringify(this.new_data),
          order_label_ids: this.orderLabelIds.join(","),
        }
      );
      order_edit(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.order_info(this.id);
          if (type != 1) {
            this.$router.go(-1);
            this.$emit("close");
          }
        } else {
          this.$message.error(res.errmsg);
          this.new_list = [];
          this.new_data = [];
          this.order_info(this.id);
        }
      });
    },
    changeFontSize(e) {
      localStorage.setItem("changeFontSize", e);
    },
    // 信息
    order_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      order_base(data).then((res) => {
        if (res.errcode == 0) {
          this.type = res.data.field_x;
          this.sort_order_down = !res.data.order_add_goods_sort ? true : false;
          this.display_sub_account =
            res.data.display_sub_account == 1 ? true : false;
          this.info = res.data;
          this.getShopTableWidth();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 基本信息
    order_info(id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id ,is_edit: 1 }
      );
      this.table_loading = true;
      order_info(data).then((res) => {
        if (res.errcode == 0) {
          let address = "";
          let detail = "";
          this.order_status = res.data.info.order_status;
          this.activity_type_list = res.data.activity_type_list;
          this.monitorForm.form.name_uid = res.data.info.member.nickname;
          this.monitorForm.form.uid = res.data.info.member.id;
          this.monitorForm.form.nickname = res.data.info.nickname;
          this.monitorForm.form.line_id = res.data.info.line_id;
          this.monitorForm.form.salesman_id = res.data.info.salesman_id;
          this.monitorForm.form.contact = res.data.info.contact;
          this.monitorForm.form.mobile = res.data.info.mobile;
          this.is_high_precision = res.data.is_high_precision;
          this.monitorForm.form.send_time = parseTime(
            res.data.info.send_time,
            "{y}-{m}-{d}"
          );
          this.monitorForm.form.address = res.data.info.address;
          this.monitorForm.form.send_time_id = parseInt(
            res.data.info.send_time_id
          );
          this.monitorForm.form.remark = res.data.info.remark;
          this.monitorForm.form.zid =
            res.data.info.zid == 0 ? 0 : res.data.info.zid;
          this.monitorForm.form.sub_zid =
            res.data.info.zid == 0
              ? 0
              : res.data.subAccount.findIndex((e) => {
                  return e.id == res.data.info.zid;
                });
          if (res.data.info.zid_info) {
            this.address.address.name =
              res.data.subAccount[
                res.data.subAccount.findIndex((e) => {
                  return e.id == res.data.info.zid;
                })
              ].address.name;
            this.address.address.mobile =
              res.data.subAccount[
                res.data.subAccount.findIndex((e) => {
                  return e.id == res.data.info.zid;
                })
              ].address.mobile;
            this.address.address.address =
              res.data.subAccount[
                res.data.subAccount.findIndex((e) => {
                  return e.id == res.data.info.zid;
                })
              ].address.address;
            this.address.address.detail =
              res.data.subAccount[
                res.data.subAccount.findIndex((e) => {
                  return e.id == res.data.info.zid;
                })
              ].address.detail;
          } else {
            this.address.address.name = res.data.subAccount[0].address.name;
            this.address.address.mobile = res.data.subAccount[0].address.mobile;
            this.address.address.address =
              res.data.subAccount[0].address.address;
            this.address.address.detail = res.data.subAccount[0].address.detail;
          }
          res.data.subAccount.map((e, ind) => {
            if (ind == 0) {
              e.id = 0;
              e.nickname = "主账号";
            }
          });
          this.address.subAccount = res.data.subAccount;
          this.address.group_id = res.data.info.member.info.group_id;
          this.standard(res.data.info.order_list);
          // 获取用户订单标签
          this.getMemberLabel();
        } else {
          this.$message.error(res.errmsg);
        }
        this.table_loading = false;
      });
    },
    standard(data) {
      let arry = [];
      data.map((e, index) => {
        arry.push({
          list_index: index + 1,
          id: e.id,
          pid: e.pid,
          activity_type: e.activity_type,
          category_id: e.category_id,
          pic: e.pic,
          url: this.avatar.domain + e.pic,
          name: e.name,
          describe: e.describe,
          goods_id: e.goods_id,
          standard_goods_id: e.standard_goods_id,
          goods_spu_id: e.goods_spu_id,
          standard_spu_id: e.standard_spu_id,
          standard_spu_code: e.standard_spu_code,
          byname: e.byname,
          spu_name: e.spu_name,
          unit: e.unit,
          order_num: e.order_num,
          old_num: e.order_num,
          new_num: "",
          order_price: e.order_price,
          old_price: e.order_price,
          new_price: "",
          order_price_copy: e.order_price,
          purchase_price: e.goods_spu.purchase_price,
          pre_purchase_price: e.pre_purchase_price,
          pre_price: e.pre_price,
          remark: e.remark,
          old_remark: e.remark,
          new_remark: "",
          designated_inventory: e.goods_spu.designated_inventory,
          minimum: e.goods_spu.minimum,
          spu_id: e.goods_spu.id,
          num: e.inventory ? e.inventory.num : "",
          show: true,
          discount: e.discount,
          sort_price: e.sort_price,
          old_sortprice: e.sort_price,
          new_sortprice: "",
          is_purchase: e.is_purchase,
          is_show: 1,
          red:
            parseFloat(e.purchase_price) > parseFloat(e.order_price)
              ? true
              : false,
        });
      });
      this.monitorForm.list = arry;
    },

    keyMove(key, index, event) {
      if (
        event.keyCode == 37 ||
        event.keyCode == 38 ||
        event.keyCode == 39 ||
        event.keyCode == 40
      ) {
        this.moveFouce(key, index, event.keyCode);
      }
    },
    moveFouce(key, index, keyCode) {
      var that = this.$refs;
      let refName = null;
      if (key == "order_num") {
        switch (keyCode) {
          case 38: // 上箭头
            if (index == 0) return;
            refName = `order_num${index - 1}`;
            break;
          case 39: // 右箭头
            refName = `order_price${index}`;
            break;
          case 40: // 下箭头
            if (index + 1 >= this.monitorForm.list.length) return;
            refName = `order_num${index + 1}`;
            break;
        }
      } else if (key == "order_price") {
        switch (keyCode) {
          case 38: // 上箭头
            if (index == 0) return;
            refName = `order_price${index - 1}`;
            break;
          case 37: // 左箭头
            refName = `order_num${index}`;
            break;
          case 39: // 右箭头
            refName = `sort_price${index}`;
            break;
          case 40: // 下箭头
            if (index + 1 >= this.monitorForm.list.length) return;
            refName = `order_price${index + 1}`;
            break;
        }
      } else if (key == "sort_price") {
        switch (keyCode) {
          case 38: // 上箭头
            if (index == 0) return;
            refName = `sort_price${index - 1}`;
            break;
          case 37: // 左箭头
            refName = `order_price${index}`;
            break;
          case 40: // 下箭头
            if (index + 1 >= this.monitorForm.list.length) return;
            refName = `sort_price${index + 1}`;
            break;
        }
      }
      if (!refName) return;
      that[refName].focus();
    },
    // 判断展示条件
    showFun(key) {
      let info = this.info.field_x || [];
      if (info.length != 0) {
        let state = info.includes(key);
        return state;
      }
    },
    // 打开批量添加商品模态框
    async openBatchAdd() {
      let that = this;
      if (this.monitorForm.form.name_uid == "") {
        that.$message.error("用户名称不能为空");
        that.$refs.company.focus();
        return;
      }
      // 打开模态框
      this.batchVisible = true;
    },
    // 通过模态框选择的商品，追加至列表list中
    addShopData(list) {
      // 获取到父组件原本的列表数据
      let fatherList = this._.cloneDeep(this.monitorForm.list);
      // 获取到子组件选中的数据对象
      let newList = this._.cloneDeep(list.list);
      delete newList.id;
      if (list.state == "push") {
        if (this.sort_order_down) fatherList.unshift(newList);
        else fatherList.push(newList);
      } else {
        let index = fatherList.findIndex((item) => item.goods_spu_id == list.list.id);
        fatherList.splice(index, 1);
      }
      this.monitorForm.list = fatherList;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

/deep/.vxe-table--body-wrapper {
  min-height: 480px !important;
  margin-bottom: 20px;
}
/deep/.set-table-wrap .vxe-table--body-wrapper {
  height: 480px !important;
}

/deep/.el-form-item--small .el-form-item__error {
  line-height: .5;
}
/deep/.vxe-body--column{
  .vxe-cell {
    height: 60px;
  }
}
.mg-l-20 {
  margin-left: 24px;
}
.mg-l-4 {
  margin-left: 4px;
}
/deep/.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 14px;
}
.paddingLeft38 {
  padding-left: 38px;
}
.mg-b-6 {
  margin-bottom: 6px;
}
.mg-r-4 {
  margin-right: 4px;
}
.mg-l-18 {
  margin-left: 18px;
}
.mg-l-14 {
  margin-left: 14px;
  margin-right: 0 !important;
}

.main_name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  height: 50px;
  .main_addr {
    color: #999;
  }
  span {
    line-height: 20px;
    display: inline;
    height: 20px;
  }
}
.mainor {
  /deep/.el-button--default {
    // border-color: $menuActiveText;
    color: $menuActiveText;
  }
  /deep/.el-form {
    margin-top: 10px;
    /deep/.el-form-item--mini.el-form-item,
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 10px;
    }
  }
  .remark_in {
    width: 100%;
    /deep/.el-form-item__content {
      width: 80%;
      .el-input {
        width: 66.9%;
      }
    }
  }
  .mainor_zh {
    padding-top: 5px;
    padding-bottom: 5px;
    em {
      color: $colour_18;
      font-size: $font_14;
      display: inline-block;
      width: 90px;
      text-align: right;
      margin-right: 9px;
    }
    span {
      color: $colour_18;
      font-size: $font_14;
      margin-right: 15px;
    }
  }

  .mainor_sp {
    ul {
      margin-right: 20px;
      li {
        margin-bottom: 10px;
        & > span {
          display: inline-block;
          line-height: 32px;
          width: 95px;
          color: $colour_18;
          font-size: $font_14;
          text-align: right;
          em {
            color: $colour_red;
            margin-right: 5px;
          }
        }
      }
    }
  }
  .newConBox.on {
    width: calc(100% - 194px);
    padding-left: 11px;
    border: none;
    position: fixed;
    z-index: 99;
    bottom: 0;
  }
  .newConBox {
    padding-left: 10px;
    padding-right: 16px;
  }
  .mainor_pr {
    margin-left: -10px;
    /deep/.el-button--default {
      // border-color: $subActive;
      color: $menuText;
      &:hover {
        border-color: $menuActiveText;
        color: $menuActiveText;
      }
    }
    .mainor_prr {
      font-size: $font_16;
      color: $colour_18;
      span {
        color: #fe3b3b;
        margin-left: 10px;
      }
    }
  }
  .mainor_ex {
    position: fixed;
    width: 220px;
    height: 100%;
    background: $white;
    box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
    top: 0;
    right: 0;
    z-index: 2001;
    transition: all 0.5s;
    transform: translate3d(100%, 0, 0);
    &.on {
      transform: translate3d(0, 0, 0);
    }
    .mainor_exb {
      position: absolute;
      width: 100%;
      height: calc(100% - 60px);
      overflow-y: auto;
      h3 {
        font-size: $font_16;
        color: $colour_18;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid $colour_e6;
        padding-left: 20px;
      }
      .mainor_exb_an {
        padding-left: 20px;
        margin-top: 15px;
        /deep/.el-checkbox {
          display: block;
          margin-top: 15px;
          margin-bottom: 15px;
        }
      }
    }
    .mainor_exb_b {
      position: absolute;
      bottom: 0;
      width: 100%;
      border-top: 1px solid $colour_e6;
      height: 55px;
      text-align: center;
      /deep/.el-button--default {
        margin-top: 12px;
        // border-color: $subActive;
        color: $menuText;
        &:hover {
          border-color: $menuActiveText;
          color: $menuActiveText;
        }
      }
    }
  }
  .main_table {
    $FontSize: var(--FontSize);
    // padding-bottom: 10px;

    /deep/ .vxe-cell--title {
      font-size: $FontSize !important;
      color: #181818;
    }

    /deep/ .vxe-cell {
      font-size: $FontSize !important;
    }
    /deep/.el-table--small td {
      padding: 10px 0;
    }
  }
  .main_taf {
    /deep/.el-table--small td {
      padding-top: 0;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 0;
      margin-top: 0;
      margin-right: 0;
    }
  }
  .mainor_co {
    position: fixed;
    width: 460px;
    height: 100%;
    background: $white;
    box-shadow: 0 6px 10px rgba(0, 21, 41, 0.08);
    top: 0;
    right: 0;
    z-index: 9999;
    transition: all 0.5s;
    transform: translate3d(100%, 0, 0);
    /deep/.el-button--default {
      border: 0;
    }
    &.on {
      transform: translate3d(0, 0, 0);
    }
    .mainor_cob_c {
      position: absolute;
      top: 15px;
      right: 15px;
      i {
        font-size: 22px;
        font-weight: bold;
        color: $colour_6;
      }
      &:hover {
        cursor: pointer;
      }
    }
    .mainor_cob_s {
      margin-top: 50px;
      margin-left: 10px;
      margin-right: 10px;
      p {
        font-size: $font_12;
        color: $colour_red;
        margin-top: 10px;
      }
      /deep/.el-input-group {
        width: 100%;
      }
    }
    .main_table {
      margin-left: 0;
      position: fixed;
      top: 0;
      height: calc(100% - 120px);
      width: 100%;
      margin-top: 120px;
      /deep/.el-table__body-wrapper {
        border-left: 0;
        table {
          border-left: 1px solid #ebeef5;
        }
      }
      /deep/.el-table__fixed-body-wrapper {
        border-right: 0;
        table {
          border-right: 1px solid #ebeef5;
        }
      }
      .main_table_p {
        margin-left: 10px;
        margin-right: 10px;
        height: 100%;
      }
      /deep/.el-table th .cell {
        font-size: $font_14;
      }
    }
  }
  .main_dialog .main_table {
    /deep/.el-table__body-wrapper {
      overflow-y: auto;
      height: 360px;
    }
  }
}
.order_num_tips {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #999;
  font-size: 14px;
}
.new_navbar_svg {
  transform: rotate(180deg);
  transition: all 500ms ease;
}
.new_navbar_svg2 {
  transition: all 500ms ease;
}

.svg_box {
  display: flex;
  align-items: center;
  margin-left: 15px;
  .navbar_svg {
    margin-left: 8px;
  }
}
.active1 {
  // 满减
  color: #118ab2;
}
.active2 {
  // 满赠
  color: #03a98e;
}
.active3 {
  // 特卖
  color: #aacd6e;
}
.active4 {
  // 积分
  color: #073b4c;
}
.active5 {
  // 曾品
  color: #f56c6c;
}
/deep/.main_table .el-table--small td .cell {
  height: auto;
}

// /deep/.el-dialog__body {
//   padding: 10px 20px;
// }
// .demo-form-inline {
//   width: 100%;

//   /deep/.el-cascader {
//     width: 100%;
//   }
//   /deep/.el-input {
//     width: 100%;
//   }
// }

/deep/.vxe-cell {
  display: flex;
  flex-direction: row;
  // flex-wrap: nowrap;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}
/deep/.vxe-header--column {
  .vxe-cell {
    height: 36px;
  }
}
// /deep/.el-link--inner {
//   width: 30px;
// }
.next_price {
  color: #e6a23c;
  margin-left: 5px;
  cursor: pointer;
  line-height: 0 !important;
  width: 100%;
}
.next_price:hover {
  text-decoration: underline;
}
.form_flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}


.main_spac1 {
  padding: 0 15px 15px 15px;
}
.mainor_im {
  width: 45px;
  height: 45px;
}
h3 {
  border-top: 1px solid #e6e6e6 !important;
  border-bottom: none !important;
}

/deep/ .row--hover {
  background-color: #edf9f7 !important;
}
</style>
